<!--当前对局看板-->
<script setup lang="js">
import CurrentGamingPersonCard from '../components/CurrentGamingPersonCard.vue'
import {computed, ref} from "vue";
import {
  championSelect,
  gameFlowSessionStore,
  gaming,
  lobby
} from "@/renderer/share/stores/sotreCurrentGameSession.js";
import GameDetailRecordOverview
  from "@/renderer/main-window/components/gamerecord/overview/GameDetailRecordOverview.vue";
import CommonNoData from "@share/components/common/Common-NoData.vue";
import {summonerInfoStore} from "@/renderer/main-window/stores/storeSummonerInfo.js";
import PersonPage from "@/renderer/main-window/components/PersonPage.vue";
import {ElMessage} from "element-plus";


const openSummonerHomeFunc = ({puuid}) => {
  window.api.summoner.getSummonerInfoByPuuid(puuid)
      .then(res => {
        currentDrawerSummonerInfo.value = res.data;
        drawerShow.value = true;
      }).catch(error => {
    ElMessage.error({message: `查询玩家信息异常:${error.message},无法查看个人主页`, duration: 500});
  })
}
const drawerShow = ref(false)
const currentDrawerSummonerInfo = ref({});

const phase = computed(() => {
  return gameFlowSessionStore().gamePhase;
})


const myTeamSummonerInfo = computed(() => {
  return gameFlowSessionStore().champSelectSession?.myTeam || [];
})


const lobbySummonerInfo = computed(() => {
  return gameFlowSessionStore().lobby?.members;
})

const gamingInfos = computed(() => {
  const {teamOne, teamTwo, gameId, isCustomGame, password,} = gameFlowSessionStore().gameFlow?.gameData || {};
  const {
    name,//地图名称
    gameModeShortName,//游戏模式
    assets
  } = gameFlowSessionStore().gameFlow?.map || {};


  const isBlue = teamOne || [].filter(item => {
    return item.puuid === summonerInfoStore().currentSummonerInfo.uuid
  }).length > 0;
  const isRed = teamTwo || [].filter(item => {
    return item.puuid === summonerInfoStore().currentSummonerInfo.uuid
  }).length > 0;

  return {
    teamOne,
    teamTwo,
    mapName: name,
    gameMode: gameModeShortName,
    backGroundPic: isBlue ? assets['map-south'] : isRed ? assets['map-north'] : ''
  }
})


</script>
<template>
  <!--  <CurrentGamingPersonCard @handleClickSummonerName="openSummonerHomeFunc"/>-->
  <template v-if="phase ===championSelect ">
    <el-space>
      <CurrentGamingPersonCard
          @handleClickSummonerName="openSummonerHomeFunc"
          v-for="item in myTeamSummonerInfo"
          :puuid="item?.puuid"
      ></CurrentGamingPersonCard>

    </el-space>
  </template>

  <template v-else-if="phase === lobby">

   <div style="width: 100%;display: flex;flex-wrap: wrap">
     <CurrentGamingPersonCard
         @handleClickSummonerName="openSummonerHomeFunc"
         :puuid="item.puuid"
         v-for="item in lobbySummonerInfo"
     ></CurrentGamingPersonCard>

   </div>

  </template>

  <template v-else-if="phase === gaming">

    <div style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
      <!--    游戏数据总览-->
      <div style="align-content: flex-start">
        <el-text>{{ gamingInfos.mapName }} {{ gamingInfos.gameMode }}</el-text>
      </div>

      <div>
        <el-space>
          <CurrentGamingPersonCard
              @handleClickSummonerName="openSummonerHomeFunc"
              team="blue" :champion-id="item.championId" :puuid="item.puuid"
              v-for="item in gamingInfos.teamOne"></CurrentGamingPersonCard>
        </el-space>
      </div>
      <el-divider style="margin:0"></el-divider>
      <el-space>
        <CurrentGamingPersonCard
            @handleClickSummonerName="openSummonerHomeFunc"
            team="red" :champion-id="item.championId" :puuid="item.puuid"
            v-for="item in gamingInfos.teamTwo"></CurrentGamingPersonCard>
      </el-space>
    </div>
  </template>

  <template v-else>
    <div
        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column">
      <CommonNoData/>
      <el-text size="large">无进行中的对局</el-text>
      <GameDetailRecordOverview/>
    </div>

  </template>
  <el-drawer destroy-on-close
             size="80%"
             v-model="drawerShow">
    <PersonPage
        :display-in-overview="true"
        :summoner-info="currentDrawerSummonerInfo"/>
  </el-drawer>
</template>

<style scoped>

</style>